// src/components/Toolbar.tsx
import React from 'react';
import {Button} from "@/components/ui/button";
import {MessageSquareText, MessageSquareTextIcon, Pencil, Smile, Trash} from "lucide-react";
import Hint from "@/components/social/hint";
import EmojiPopover from "@/components/social/emoji-popover";

interface Props {
    isAuthor: boolean
    isPending: boolean
    handleEdit: () => void
    handleDelete: () => void
    handleThread: () => void
    handleReaction: (emoji: any) => void
    hideThreadButton: boolean
}

const Toolbar = ({
                     isPending,
                     isAuthor,
                     handleReaction,
                     handleDelete,
                     handleThread,
                     handleEdit,
                     hideThreadButton
                 }: Props) => {
    return (
        <div className={`absolute top-0 right-5`}>
            <div className={`group-hover:opacity-100 opacity-0 transition-opacity border bg-white
            rounded-md shadow-sm`}>
                <EmojiPopover
                    hint={`Add reaction`}
                    // onEmojiSelected={(emoji) => handleReaction(emoji.native)}
                    onEmojiSelected={(emoji) => handleReaction(emoji)}
                >
                    <Button
                        variant={'ghost'}
                        size={'iconSm'}
                        disabled={isPending}
                        className={``}
                    >
                        <Smile className={`size-4`}/>
                    </Button>
                </EmojiPopover>
                {/*点击该icon进入回复面板*/}
                {!hideThreadButton && (
                    <>
                        <Hint label={`Reply in thread`}>
                            <Button
                                variant={'ghost'}
                                size={'iconSm'}
                                disabled={isPending}
                                className={``}
                                // 设置当前message的id为父id
                                onClick={handleThread}
                            >
                                <MessageSquareTextIcon className={`size-4`}/>
                            </Button>
                        </Hint>
                    </>
                )}
                {isAuthor && (
                    <>
                        <Hint label={`Edit message`}>
                            <Button
                                variant={'ghost'}
                                size={'iconSm'}
                                disabled={isPending}
                                className={``}
                                onClick={handleEdit}
                            >
                                <Pencil className={`size-4`}/>
                            </Button>
                        </Hint>
                        <Hint label={`Delete message`}>
                            <Button
                                variant={'ghost'}
                                size={'iconSm'}
                                disabled={isPending}
                                className={``}
                                onClick={handleDelete}
                            >
                                <Trash className={`size-4`}/>
                            </Button>
                        </Hint>
                    </>
                )}
            </div>
        </div>
    );
};

export default Toolbar;